<script setup>
import { onMounted, ref, watch, watchEffect } from "vue";

// 声明一个ref来存放该元素的引用
// 必须和模板里的ref同名
const input = ref(null)

// console.log(input.value); // null
// 注意，只可以在组件挂载后才能访问模板引用
// onMounted(() => {
//   // input.value.focus()
// })

// 听一个模板引用 ref 的变化，确保考虑到其值为 null 的情况
// 或者使用watchPostEffect就不用if判断了
watchEffect(() => {
  // console.log('监听input', input.value);
  if (input.value) {
    input.value.focus()
  }
})

// v-for 中的模板引用
const list = ref([1,2,3])

const itemRefs = ref([])

onMounted(() => {
  // console.log(itemRefs.value, '=itemRefs=');
})

// 函数模板引用
const myRef = (el) => {
  console.log(el);
}
</script>

<template>
  <input type="text" ref="input">
  <ul>
    <li v-for="item in list" ref="itemRefs">{{ item }}</li>
  </ul>
  <input type="text" :ref="myRef">
</template>

<style></style>
